<template>
	<view :class="themeName">
		<navbar title="订单详情"></navbar>
		<view class="order-detail">
			<!-- Order Status -->
			<view class="order-status">
				<!-- 待支付 -->
				<template v-if="!orderInfo.order_status">
					<view class="order-status-name">{{ orderAction["name"] }}</view>
					<view class="order-status-desc" v-if="showCountDown">
						<text class="m-r-10">{{$zhTran('支付剩余')}}</text>
						<u-count-down :timestamp="getCountDownSegment(orderInfo.cancel_unpaid_orders_time)"
							:show-days="false" :show-hours="false" :font-size="26" :separator-size="26" color="#FFFFFF"
							separator-color="#FFFFFF" bg-color="unset" separator="zh" @end="showCountDown = false" />
						<text class="m-l-10">{{$zhTran('自动关闭')}}</text>
					</view>
				</template>
				<!-- 订单状态【快递配送】 -->
				<template v-else-if="orderInfo.delivery_type !== 2">
					<view class="order-status-name">{{ orderAction["name"] }}</view>
					<template v-if="orderAction['desc']">
						<view class="order-status-desc">{{ orderAction["desc"] }}</view>
					</template>
				</template>
				<!-- 订单状态【门店自提】 -->
				<template v-else-if="orderInfo.delivery_type === 2">
					<view class="order-status-name">{{
						selffetchStatus[orderInfo.order_status]["name"]
					}}</view>
					<template v-if="selffetchStatus[orderInfo.order_status]['desc']">
						<view class="order-status-desc">{{
							selffetchStatus[orderInfo.order_status]["desc"]
						}}</view>
					</template>
				</template>
			</view>

			<!-- Address -->
			<view class="delivery">
				<!-- 快递配送 -->
				<template v-if="orderInfo.delivery_type == 1">
					<address-card :has-content="true" border-radius="7px">
						<template slot="header">
							<text>{{ addressInfo.contact }}</text>
							<text class="m-l-10">{{ addressInfo.mobile }}</text>
						</template>
						<template slot="main">
							<text>{{ addressInfo.province }}</text>
							<text class="m-l-10">{{ addressInfo.city }}</text>
							<text class="m-l-10">{{ addressInfo.district }}</text>
							<text class="m-l-10">{{ addressInfo.address }}</text>
						</template>
					</address-card>
				</template>

				<!-- 门店自提 -->
				<template v-if="orderInfo.delivery_type === 2">
					<address-card :has-content="true" :placeholder="$zhTran('请选择门店地址')" border-radius="7px">
						<template slot="header">
							<text>{{ orderInfo.selffetch_shop.name }}</text>
						</template>
						<template slot="main">
							<text>{{ orderInfo.selffetch_shop.detailed_address }}</text>
						</template>
						<template slot="footer">
							<text>
								<text>{{$zhTran('营业时间：')}}</text>
								<text>{{ orderInfo.selffetch_shop.business_start_time }}</text>
								<text>-</text>
								<text>{{ orderInfo.selffetch_shop.business_end_time }}</text>
							</text>
						</template>
					</address-card>
				</template>
			</view>

			<!-- 提货码QR -->
			<view v-if="orderInfo.delivery_type == 2" class="contain receive">
				<view v-if="orderInfo.verification_status" class="delivery--die">
					<u-image :src="$getImageUri('resource/image/shopapi/uniapp/delivery_die.png')" width="134"
						height="98" mode="scaleFill" />
				</view>

				<view class="nr receive-info">
					<view class="receive-info-item">
						<text class="normal">{{$zhTran('提货人')}}</text>
						<text class="black">{{ addressInfo.contact }}</text>
					</view>
					<view class="receive-info-item">
						<text class="normal">{{$zhTran('联系方式')}}</text>
						<text class="black">{{ addressInfo.mobile }}</text>
					</view>
				</view>
			</view>

			<!-- 商品 -->
			<view class="contain order-goods">
				<view v-for="(goodsItem, goodsIndex) in goodsList" :key="goodsIndex">
					<goods-card :key="goodsIndex" shape="rectangle" :name="goodsItem.goods_name"
						:image="goodsItem.goods_image" :contain-style="{ height: '280rpx' }"
						:image-style="{ width: '180rpx', height: '180rpx' }" @tap="goGoodsDetail(goodsItem.goods_id)">
						<view class="flex-1" slot="default">
							<view class="xs m-t-10" v-if="orderInfo.show_order_detail_goods_tag">
								<u-image width="80rpx" height="40rpx" :src="goodsItem.tag_desc"
									v-if="goodsItem.tag_desc != ''" />
							</view>
							<view class="gfa-tag" v-if="goodsItem.is_gifts">{{$zhTran('赠品')}}</view>
							<text class="muted xs m-t-10">{{ goodsItem.spec_value_str }}</text>
							<text class="muted xs" v-if="goodsItem.coupon_unuse==1">{{$zhTran('(不可用优惠券)')}}</text>
							<view class="xs m-t-10" v-if="orderInfo.show_order_detail_goods_code" :style="{
								color: orderInfo.order_detail_goods_code_color,
							}">{{$zhTran('编码：')}}{{ goodsItem.code == null ? "" : goodsItem.code }}</view>
							<view class="xs m-t-10" v-if="orderInfo.show_order_detail_goods_model" :style="{
								color: orderInfo.order_detail_goods_model_color,
							}">{{$zhTran('型号：')}}{{
	goodsItem.goods_model == null ? "" : goodsItem.goods_model
}}</view>
							<view class="m-t-10 flex row-between">

								<price v-if="orderInfo.order_type == 0 || orderInfo.order_type == 4"
									:content="goodsItem.original_price" mainSize="32rpx" minorSize="24rpx"
									:prefix="orderInfo.price_symbol" />
								<price v-else :content="goodsItem.goods_price" mainSize="32rpx" minorSize="24rpx"
									:prefix="orderInfo.price_symbol" />
								<text class="lighter sm">x{{ goodsItem.goods_num }}</text>
							</view>
						</view>
					</goods-card>
					<!-- 售后 -->
					<view class="order-goods__handle" v-if="orderInfo.order_status == 3 && goodsItem.after_sale_btn">
						<!-- 申请售后 -->
						<template v-if="goodsItem.after_sale_btn === 1">
							<view class="order-goods__handle-button" @tap="
								goAfterSale(
									afterSaleStatus[goodsItem.after_sale_btn]['href'],
									goodsItem.id
								)
							">
								{{ afterSaleStatus[goodsItem.after_sale_btn]["name"] }}
							</view>
						</template>
						<!-- 售后中 | 售后成功 | 售后失败 -->
						<template v-else>
							<view class="order-goods__handle-button" @tap="
								goAfterSale(
									afterSaleStatus[goodsItem.after_sale_btn]['href'],
									goodsItem.after_sale_id
								)
							">
								{{ afterSaleStatus[goodsItem.after_sale_btn]["name"] }}
							</view>
						</template>
					</view>
				</view>
			</view>
			<!-- 虚拟发货内容 -->
			<template v-if="orderInfo.delivery_content">
				<view class="order-info contain" @click="handleCopy(orderInfo.delivery_content)">
					<view class="item">
						<view class="black" style="word-break: break-all">{{
							orderInfo.delivery_content
						}}</view>
						<view class="flex row-right m-t-30">
							<view class="copy-btn">{{$zhTran('复制')}}</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 账单 -->
			<view class="contain order-bill">
				<view class="cell order-bill__item">
					<view class="cell-label">{{$zhTran('商品金额')}}</view>
					<view class="cell-content">
						<price v-if="orderInfo.order_type == 0 || orderInfo.order_type == 4"
							:content="orderInfo.total_original_price" :prefix="orderInfo.price_symbol" />
						<price v-else :content="orderInfo.goods_price" :prefix="orderInfo.price_symbol" />
					</view>
				</view>
				<view class="cell order-bill__item">
					<view class="cell-label">{{
						orderInfo.is_stepwise_freight ? orderInfo.stepwise_freight_nick : $zhTran('运费')
					}}
					</view>
					<view class="cell-content">
						<price :content="orderInfo.express_price" :prefix="orderInfo.price_symbol" />
					</view>
				</view>
				<view class="cell order-bill__item" v-if="orderInfo.discount_amount * 1">
					<view class="cell-label">{{$zhTran('优惠券')}}</view>
					<view class="cell-content">
						<price :content="orderInfo.discount_amount" :color="themeColor"
							:prefix="'-' + orderInfo.price_symbol" />
					</view>
				</view>
				<view class="cell order-bill__item" v-if="orderInfo.member_amount * 1">
					<view class="cell-label">{{$zhTran('会员折扣')}}</view>
					<view class="cell-content">
						<price :content="orderInfo.member_amount" :color="themeColor" prefix="-￥" />
					</view>
				</view>
				<view class="cell order-bill__item" v-if="orderInfo.change_price * 1">
					<view class="cell-label">{{$zhTran('商品改价')}}</view>
					<view class="cell-content">
						<price :content="orderInfo.change_price" :color="themeColor"
							:prefix="'-' + orderInfo.price_symbol" />
					</view>
				</view>
				<block v-if="orderInfo.pay_way == 5">
					<view class="cell order-bill__item">
						<view class="cell-content">
							<text class="muted m-r-10">{{$zhTran('订单总金额:')}}</text>
							<price :content="orderInfo.order_amount" mainSize="32rpx" minorSize="24rpx"
								:color="themeColor" :prefix="orderInfo.price_symbol" />
						</view>
					</view>
					<view class="cell order-bill__item">
						<view class="cell-content">
							<text class="muted m-r-10">{{$zhTran('余额付款:')}}</text>
							<price :content="orderInfo.bal_amount" mainSize="32rpx" minorSize="24rpx"
								:color="themeColor" :prefix="orderInfo.price_symbol" />
						</view>
					</view>
					<view class="cell order-bill__item">
						<view class="cell-content">
							<text class="muted m-r-10">{{
								$zhTran(orderInfo.pay_status == 2 ? "实付款:" : "微信付款:")
							}}</text>
							<price :content="orderInfo.need_amount" mainSize="32rpx" minorSize="24rpx"
								:color="themeColor" :prefix="orderInfo.price_symbol" />
						</view>
					</view>
				</block>
				<block v-else>
					<block v-if="orderInfo.integrate_amount > 0">
						<view class="cell order-bill__item">
							<view class="cell-content">
								<text class="muted m-r-10">{{$zhTran('已付款:')}}</text>
								<price :content="orderInfo.done_amount" mainSize="32rpx" minorSize="24rpx"
									:color="themeColor" :prefix="orderInfo.price_symbol" />
							</view>
						</view>
						<view class="cell order-bill__item">
							<view class="cell-content">
								<text class="muted m-r-10">{{$zhTran('待付款:')}}</text>
								<price :content="orderInfo.integrate_amount" mainSize="32rpx" minorSize="24rpx"
									:color="themeColor" :prefix="orderInfo.price_symbol" />
							</view>
						</view>
					</block>
					<view class="cell order-bill__item" v-else>
						<view class="cell-content">
							<text class="muted m-r-10">{{$zhTran('实付款:')}}</text>
							<price :content="orderInfo.order_amount" mainSize="32rpx" minorSize="24rpx"
								:color="themeColor" :prefix="orderInfo.price_symbol" />
						</view>
					</view>
				</block>
			</view>

			<!-- 留言 -->
			<view v-if="orderInfo.user_remark" class="contain cell remark">
				<view class="cell-label">{{$zhTran('买家留言')}}</view>
				<view class="cell-content muted" style="word-break: break-all">{{
					orderInfo.user_remark
				}}</view>
			</view>

			<!-- 订单信息 -->
			<view class="contain order-info">
				<view class="cell order-info__item">
					<view class="cell-label">{{$zhTran('订单编号')}}</view>
					<view class="cell-content">
						<view class="flex-1">{{ orderInfo.sn }}</view>
						<view class="button--copy" @tap="handleCopy(orderInfo.sn)">{{$zhTran('复制')}}</view>
					</view>
				</view>
				<view class="cell order-info__item">
					<view class="cell-label">{{$zhTran('订单类型')}}</view>
					<view class="cell-content">{{ orderInfo.order_type_desc }}</view>
				</view>
				<view class="cell order-info__item">
					<view class="cell-label">{{$zhTran('支付方式')}}</view>
					<view class="cell-content">{{ getPaywayName(orderInfo.pay_way) }}</view>
				</view>
				<view class="cell order-info__item">
					<view class="cell-label">{{$zhTran('下单时间')}}</view>
					<view class="cell-content">{{ orderInfo.create_time }}</view>
				</view>
				<block v-if="orderInfo.pay_way == 5">
					<view v-if="orderInfo.bal_pay_time" class="cell order-info__item">
						<view class="cell-label">{{$zhTran('余额付款')}}</view>
						<view class="cell-content">{{ orderInfo.bal_pay_time }}</view>
					</view>
					<view v-if="orderInfo.pay_time" class="cell order-info__item">
						<view class="cell-label">{{$zhTran('微信付款')}}</view>
						<view class="cell-content">{{ orderInfo.pay_time }}</view>
					</view>
				</block>
				<block v-else>
					<view v-if="orderInfo.pay_time" class="cell order-info__item">
						<view class="cell-label">{{$zhTran('付款时间')}}</view>
						<view class="cell-content">{{ orderInfo.pay_time }}</view>
					</view>
				</block>
				<view v-if="orderInfo.express_time" class="cell order-info__item">
					<view class="cell-label">{{$zhTran('发货时间')}}</view>
					<view class="cell-content">{{ orderInfo.express_time }}</view>
				</view>
				<view v-if="orderInfo.confirm_take_time" class="cell order-info__item">
					<view class="cell-label">{{$zhTran('成交时间')}}</view>
					<view class="cell-content">{{ orderInfo.confirm_take_time }}</view>
				</view>
				<view v-if="orderInfo.other_express_desc != ''" class="cell order-info__item">
					<view class="cell-label">{{$zhTran('配送方式')}}</view>
					<view class="cell-content">{{ orderInfo.other_express_desc }}</view>
				</view>
				<view class="cell order-info__item">
					<view class="cell-label">{{$zhTran('车牌号')}}</view>
					<view class="cell-content">
						<view class="flex-1">{{ orderInfo.address.car_num || '' }}</view>
					</view>
				</view>
			</view>

			<w-jishuzhichi />

			<!-- Order Operational -->
			<view v-if="orderButtons.length" class="operational">
				<block v-for="buttonItem in orderButtons" :key="buttonItem.event">
					<view :class="['order-button', `order-button--${buttonItem.style}`]"
						@tap="onOrderButtons(buttonItem['event'], orderInfo.id, orderInfo.user_id)">
						{{ buttonItem.name }}
					</view>
				</block>
			</view>

			<!-- 页面状态 -->
			<page-status :status="pageStatus">
				<template #error>
					<u-empty :text="$zhTran('订单异常')"
						:src="$getImageUri('resource/image/shopapi/uniapp/empty/order.png')" :icon-size="280"></u-empty>
				</template>
			</page-status>

		</view>
	</view>
</template>


<script>
	import {
		apiCloudShopOrderDetail,
	} from "@/api/cloudshop";
	import {
		apiOrderClose,
	} from "@/api/order";
	import OrderMixin from "@/mixins/order";
	import {
		copy
	} from "@/utils/tools";
	import {
		PageStatusEnum,
		PaymentStatusEnum,
		OrderTypeEnum
	} from "@/utils/enum";

	export default {
		name: "OrderDetail",
		mixins: [OrderMixin],

		data() {
			return {
				// 页面状态
				pageStatus: PageStatusEnum["LOADING"],
				order_id: "", // 订单ID
				orderInfo: {}, // 订单信息
				goodsList: [], // 商品列表
				addressInfo: {}, // 地址信息

				orderButtons: [], // 订单按钮组

				showCountDown: true, // 显示倒计时

				// 订单状态
				orderStatus: {
					0: {
						name: this.$zhTran("等待买家付款"),
					},
					1: {
						name: this.$zhTran("等待商家发货"),
						desc: this.$zhTran("您的商品正在打包中，请耐心等待…"),
					},
					2: {
						name: this.$zhTran("待收货"),
						desc: this.$zhTran("您的商品正在路中，请耐心等待…"),
					},
					3: {
						name: this.$zhTran("已完成"),
						desc: this.$zhTran("商品已签收，期待再次购买！"),
					},
					4: {
						name: this.$zhTran("订单已关闭"),
						desc: "",
					},
				},

				// 订单状态【自提门店】
				selffetchStatus: {
					1: {
						name: this.$zhTran("待取货"),
						desc: this.$zhTran("请前往指定门店取货"),
					},
					3: {
						name: this.$zhTran("已完成"),
						desc: this.$zhTran("交易已完成，感谢您的购买！"),
					},
					4: {
						name: this.$zhTran("订单已关闭"),
						desc: "",
					},
				},

				// 售后状态
				afterSaleStatus: {
					1: {
						name: this.$zhTran("申请售后"),
						href: "/bundle/pages/post_after_sale/post_after_sale",
					},
					2: {
						name: this.$zhTran("售后中"),
						href: "/bundle/pages/after_sale_detail/after_sale_detail",
					},
					3: {
						name: this.$zhTran("售后成功"),
						href: "/bundle/pages/after_sale_detail/after_sale_detail",
					},
					4: {
						name: this.$zhTran("售后失败"),
						href: "/bundle/pages/after_sale_detail/after_sale_detail",
					},
				},
			};
		},

		computed: {
			OrderTypeEnum: () => OrderTypeEnum,
			orderAction() {
				if (this.orderInfo.audit_status === 0)
					return {
						name: this.$zhTran("订单") + this.orderInfo.audit_status_desc,
					};

				return this.orderStatus[this.orderInfo.order_status] || {};
			},
		},

		methods: {
			handleCopy: copy,
			// 刷新订单数据
			refreshOrderData() {
				return apiCloudShopOrderDetail({
						id: this.order_id,
						user_id: this.order_user
					})
					.then((ndata) => {
						let data = this.$zhTran(ndata)
						this.orderInfo = data;
						this.addressInfo = data.address;
						this.goodsList = data.order_goods;
						this.orderButtons = this.getOrderStatusButtons(data.btn) ?? [];
						return Promise.resolve(data);
					})
					.catch((err) => {
						return Promise.reject(err);
					});
			},

			// 获取支付方式名称
			getPaywayName(payway) {
				let status_desc = ''
				switch (payway) {
					case 1:
						status_desc = "余额支付";
						break
					case 2:
						status_desc = "微信支付";
						break
					case 3:
						status_desc = "支付宝支付";
						break
					case 5:
						status_desc = "余额+微信支付";
						break
					case 6:
						status_desc = "微信支付(农商行)";
						break
					case 7:
						status_desc = "微信支付(金蝶)";
						break
					case 8:
						status_desc = "货到付款" + (this.orderInfo.pay_status ? '' : '(待付款)');
						break
					case 9:
						status_desc = "额度授信";
						break
				}
				status_desc = this.$zhTran(status_desc)
				return status_desc
			},

			// 获取倒计时段
			getCountDownSegment(endTimestamp) {
				const startTimestamp = new Date().getTime() / 1000;
				if (endTimestamp - startTimestamp <= 0) this.showCountDown = false;
				return endTimestamp - startTimestamp;
			},

			// 去商品详情
			goGoodsDetail(goods_id) {
				this.$Router.push({
					path: "/bundle2/pages/goods_detail/goods_detail",
					query: {
						id: goods_id,
					},
				});
			},

			// 去售后
			goAfterSale(href, id) {
				this.$Router.push({
					path: href,
					query: {
						id,
					},
				});
			},
		},

		async onLoad() {
			const options = this.$Route.query;

			try {
				if (!options.order_id) throw new Error(this.$zhTran("订单异常"));
				this.order_id = options.order_id;
				this.order_user = options.order_user
				await this.refreshOrderData();
				this.pageStatus = PageStatusEnum["NORMAL"];
			} catch (err) {
				console.log(err);
				// setTimeout(() => {
				// 	this.$Router.back()
				// }, 0.5 * 1000)
				this.pageStatus = PageStatusEnum["ERROR"];
			}

		},

		onUnload() {},
	};
</script>


<style lang="scss" scoped>
	.order-detail {
		padding: 0 20rpx calc(100rpx + 20rpx + constant(safe-area-inset-bottom)) 20rpx;
		padding: 0 20rpx calc(100rpx + 20rpx + env(safe-area-inset-bottom)) 20rpx;

		@include background_linear() background-size: 200vw 200rpx;
		background-repeat: no-repeat;

		.contain {
			margin-top: 20rpx;
			border-radius: 7px;
			background-color: #ffffff;
		}

		// 单元格
		.cell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: $-font-size-nr;

			&-label {
				width: 142rpx;
			}

			&-content {
				flex: 1;
				display: flex;
				align-items: center;
			}
		}
	}

	.order-status {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 136rpx;
		// @include background_linear()
		color: #ffffff;

		// &::before {
		// 	z-index: 1;
		// 	position: absolute;
		// 	left: -20rpx;
		// 	right: -20rpx;
		// 	display: block;
		// 	content: "";
		// 	width: 100vw;
		// 	height: 200rpx;
		// 	@include background_linear()
		// }

		&-name {
			font-size: $-font-size-lg;
		}

		&-desc {
			font-size: $-font-size-sm;
		}
	}

	.order-goods {

		&__handle {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 20rpx 20rpx 20rpx;

			&-button {
				padding: 8rpx 30rpx;
				border: $-solid-border;
				border-radius: 60px;
				font-size: $-font-size-sm;
			}
		}

	}

	.order-bill {
		padding: 20rpx;

		&__item {
			height: 60rpx;

			.cell-content {
				justify-content: flex-end;
			}
		}
	}

	.remark {
		padding: 24rpx 20rpx;
		align-items: flex-start !important;
	}

	.order-info {
		padding: 20rpx;

		&__item {
			height: 60rpx;
		}

		.copy-btn {
			font-size: 24rpx;
			padding: 6rpx 18rpx;
			border-radius: 8rpx;
			@include font_color();
			@include background_color(0.1);
		}
	}

	.receive {
		position: relative;

		.delivery--die {
			position: absolute;
			top: 0;
			right: 30rpx;
		}

		.receive-qr {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-height: 460rpx;
		}

		.qr-contain {
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 140px;
			height: 140px;
			border: 1px solid #cccccc;
			border-radius: 5px;

			&--die {
				position: relative;

				&::before {
					position: absolute;
					z-index: 99;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					display: block;
					content: "";
					background-color: rgba(255, 255, 255, 0.5);
				}
			}
		}

		.qr-code {
			padding: 8rpx 30rpx;
			border-radius: 60px;
			background-color: #f6f6f6;
		}

		.receive-info {
			padding-left: 20rpx;

			&-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				padding-right: 30rpx;

				&:nth-child(n + 2) {
					border-top: $-dashed-border;
				}
			}
		}
	}

	.operational {
		box-sizing: border-box;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 20rpx constant(safe-area-inset-bottom) 20rpx;
		padding: 0 20rpx env(safe-area-inset-bottom) 20rpx;
		border-top: $-solid-border;
		background-color: #ffffff;

		.order-button {
			box-sizing: border-box;
			padding: 10rpx 30rpx;
			border-radius: 60px;
			font-size: $-font-size-nr;

			&:nth-child(n + 2) {
				margin-left: 20rpx;
			}

			&--primary {
				@include background_color();
				color: #ffffff;
			}

			&--normal {
				border-width: 1px;
				border-style: solid;
				@include border_color();
				@include font_color();
			}

			&--muted {
				border: $-solid-border;
				color: $-color-lighter;
			}
		}
	}

	.button--copy {
		padding: 4rpx 20rpx;
		border: $-solid-border;
		border-radius: 60px;
		font-size: $-font-size-xs;
	}

	.gfa-tag {
		width: 80rpx;
		height: 40rpx;
		border: 1rpx solid red;
		border-radius: 6rpx;
		color: red;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>